<template>
  <div class="app-container">
    <el-form ref="formData" :model="topData" label-width="80px">
		<el-row>
			<el-col :span="5">
				<el-form-item label="版本">
				  <!-- <el-select v-model="topData.textbook_house" placeholder="全部">
				    <el-option label="123" :value="1" />
				  </el-select> -->
				  <el-input v-model="topData.textbook_house" placeholder="请输入版本"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="教材名称">
				  <el-select v-model="topData.textbook_name" placeholder="全部">
				    <el-option v-for="(item,index) in teacherData" :key="index" :label="item.textbook_name" :value="item.textbook_name" />
				  </el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="使用年级">
				  <el-select v-model="topData.grade" placeholder="全部">
				    <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index+1" />
				  </el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<div class="block">
				  <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 250px;" v-model="topData.public_date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
				</div>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="queryInput">查询</el-button>
				<el-button>重置</el-button>
			</el-col>
		</el-row>
    </el-form>
	<div class="btn">
		<el-button type="primary" @click="newTea">教材信息录入</el-button>
		<el-button type="success" @click="addKnows">教材知识点添加</el-button>
		<div>
			<el-button :type="show?'danger':'success'" @click="query">{{show?'回收站':'主页'}}</el-button>
		</div>
	</div>
	<!-- 表格数据 -->
	<table-data :teacherData="teacherData" :show="show" :queryTea="queryTea"></table-data>
	<!-- 分页 -->
	<el-pagination
	    @size-change="handleSizeChange"
	    @current-change="handleCurrentChange"
	    :current-page="page"
	    :page-sizes="[10, 20, 30, 40]"
	    :page-size="limit"
	    layout="total, sizes, prev, pager, next, jumper"
	    :total="total">
	</el-pagination>
	<!-- 新建教材弹窗 -->
	<el-dialog title="新建教材" :visible.sync="showNew" width="500px">
		<add-tea></add-tea>
	</el-dialog>
	<el-dialog title="添加教材知识点" :visible.sync="showKnow" width="700px">
		<add-know :teacherData="teacherData"></add-know>
	</el-dialog>
  </div>
</template>

<script>
import { addTeach, addKnowledge, queryTeach, queryTeachById, addUpdate, delTeach } from '@/api/studentRecruit.js'
import tableData from './components/query/tableData.vue'
import addTea from './components/add/addTea.vue'
import addKnow from './components/know/addKnow.vue'
import { getSessionInfo } from '@/utils/auth'
export default {
	components:{
		tableData,
		addTea,
		addKnow
	},
    name: 'Index',
    data() {
        return {
			show:true, //true主页，false回收站显示状态
			showKnow:false, //添加知识点弹窗状态
			showNew:false, //新建教材弹窗
			topData:{ //头部查询输入框
				textbook_name:'',
				textbook_house:'',
				public_date:'',
				grade:'',
			},
			semesterList:[], //学期
			teacherData:[], //教材信息
			grade:['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
			page:1, //当前页
			limit:10, //每页条数
			total:0, //学员列表总共条数
			pagesize:0, //学员列表总共页数
        }
    },
    computed: {
        
    },
    created() {
        this.queryTea()
    },
    methods: {
		//添加教材知识点
		addKnows(){
			this.showKnow = true
		},
		//头部输入框搜索
		queryInput(){
			this.queryTea()
		},
		query(){
			this.show = !this.show
			this.queryTea()
		},
		//分页查询教材信息
		async queryTea(){
			let resData = {
				page:this.page,
				limit:this.limit,
				textbook_name:this.topData.textbook_name,
				textbook_house:this.topData.textbook_house,
				public_date:this.topData.public_date,
				grade:this.topData.grade,
			}
			//true主页，false回收站
			if(this.show){
				resData.is_delete = 0
			}else{
				resData.is_delete = 1
			}
			let data = await queryTeach(resData)
			if(data.code == 200){
				this.total = data.data.total
				this.pagesize = data.data.total_page
				this.teacherData = data.data.list
				console.log(this.teacherData);
			}
		},
		// 新建联系人弹窗
		newTea(){
			this.showNew = true
		},
		//分页
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.limit = val
			this.queryTea()
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val
			this.queryTea()
		},
	}
}
</script>

<style lang="scss" scoped>
  .btn{
	  display: flex;
	  flex-direction: row;
	  /* justify-content: space-between; */
	  div{
		  width: 100%;
		  text-align: right;
		  margin-right: 20px;
	  }
  }
</style>
